<template>
	<view>
		<view class="actionBar">
			<view class="flexbc" style="width:100rpx;">
				<button class="shareBtn"
					@click="shareHandle(NoticeUser.UserID, 'Notices', Notice.NoticeID, 6, '分享', 0)"></button>
				<view style="line-height:80rpx;">0</view>
			</view>

			<view class="flexbc" style="width:100rpx;">
				<view class="favBtn"></view>
				<view style="line-height:80rpx;">0</view>
			</view>

			<view class="baomingBtn" @click="editBtn">修改通告</view>
		</view>

		<view class="commCards" style="height:70rpx;">
			<view class="NoticeUserHeadPic">
				<image :src="NoticeUser.WxHeadPic"></image>
			</view>
			<view style="float:left;margin-left:10rpx;">
				<view>
					<text class="fs-26">{{ NoticeUser.NickName }}</text>
				</view>
				<view class="fs-20" style="color:#999">
					<text v-for="(item,index) in UserRoles" :key="index">
						{{ item.LabelName }}
						<text v-if="index < UserRoles.length-1">，</text>
					</text>
					｜ {{ NoticeUser.UserCity }}
				</view>
			</view>
		</view>

		<view class="commCards">
			<view class="flexbc fs-28">
				<view class="bold" style="color:#505050;">{{ Notice.ClassName }}</view>
				<view style="color:#FF0066;">{{ JSON.parse(Notice.Price).text }}</view>
			</view>
			<view class="marginTop-10">
				<view class="city">面向地区：{{ Notice.City }}</view>
				<view class="address">招募人数：{{ Notice.PersonNum }}</view>
				<view class="times">性别要求：{{ JSON.parse(Notice.SexLimit).text }}</view>
				<view class="pics">报名截止：{{ Notice.NoticeEndTime }}</view>
			</view>
		</view>

		<view class="commCards">
			<view class="commCardTitle">通告详情</view>
			<view class="marginTop-10">
				<view class="content line-height-40" style="color:#999;">
					{{ Notice.NoticeMemo }}
				</view>
				<view class="times"></view>
				<view class="address"></view>
				<view class="pics"></view>
			</view>
		</view>

		<view class="commCards">
			<view class="commCardTitle">联系方式</view>
			<view class="marginTop-10 text-align-center">
				- 报名后，等待对方联系你 -
			</view>
		</view>

		<view class="commCards" style="height:100rpx;">
			<view class="commCardTitle">已报名{{ NoticeBaoming.length }}人</view>
			<view class="marginTop-20" v-if="NoticeBaoming.length > 0">
				<view v-for="(item,key) of NoticeBaoming" :key="key" @click="baomingUser(item)">
					<view class="NoticeUserHeadPic">
						<image :src="item.BaomingUser.WxHeadPic"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="commCards line-height-40" style="color:#999;">
			温馨提示：双方私下沟通时注意防骗，切勿相信先缴纳费用的合作。如遇虚假通告、敲诈信息等不良行为，请立即向平台投诉。投诉
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				LoginInfo: 0,
				NoticeID: 0,
				NoticeUser: {},
				UserRoles: [],
				Notice: {},
				NoticeBaoming: [],
				inviter: 0,
				$MyNoticeAction: [],
				ShareState: 0,
				FavState: 0,
				baseUrl: ''
			};
		},
		onLoad(option) {
			this.baseUrl = this.$baseUrl;
			// console.log('LoginInfo', this.LoginInfo)
			this.NoticeID = option.NoticeID
			if (uni.getStorageSync("isLogin")) {
				this.LoginInfo = uni.getStorageSync("isLogin");
			}
			this.inviter = uni.getStorageSync("isLogin").UserID
			wx.showShareMenu({
				withShareTicket: true
			})
			this.getNotice()
		},
		onShareAppMessage({
			from,
			target
		}) {

			let userinfo = this.NoticeUser.NickName;

			let myObj = {
				title: userinfo + "的通告",
				path: "/pages/index/notice/details?inviter=" + this.inviter + "&NoticeID=" + this.NoticeID,
				imageUrl: "https://pic.iresearch.cn/news/202109/45f6d3e4-d85b-41ba-b875-43a03b95d921.jpg",
				success: (res) => {
					// console.log('分享成功', res)
				},
				fail: (err) => {
					// console.log('分享失败', err)
				}
			}

			return myObj;
		},
		methods: {
			baomingUser(item) {
				this.$common.goNavPage('/artistesPages/pages/artister?artisterID=' + item.BaomingUser.UserID);
			},
			getNotice() {
				this.$httpost('/Home/NoticeDetails', {
					NoticeID: this.NoticeID
				}).then(res => {
					// console.log('Notice', res);
					if (res.code == 200) {
						this.NoticeUser = res.data.NoticeUser
						this.Notice = res.data.Notice
						this.UserRoles = res.data.UserRoles
						this.NoticeBaoming = res.data.NoticeBaoming
						this.$MyNoticeAction = res.data.$MyNoticeAction

						this.$MyNoticeAction.forEach((item, index) => {
							if (item.ActionType == 3) {
								this.FavState = 1;
							}
							if (item.ActionType == 30) {
								this.FavState = 0;
							}
							if (item.ActionType == 6) {
								this.ShareState = 1;
							}
							if (item.ActionType == 60) {
								this.ShareState = 0;
							}
						});
					}

				});
			},
			shareHandle(ArtisterID, ActionTable, ActionID, ActionType, ActionName, GetWallet) {
				if (uni.getStorageSync("isLogin")) {
					this.$httpost('/UserAction/UserAction', {
						ArtisterID: ArtisterID,
						ActionType: ActionType,
						ActionName: ActionName,
						ActionTable: ActionTable,
						ActionID: ActionID,
						GetWallet: GetWallet,
						AddValue: ''
					}).then(res => {
						// console.log('favNotice', res);
						if (res.code == 200) {
							if (res.data !== 0) {
								this.getNotice()
							}
						}
					});
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}
			},
			favHandle(ArtisterID, ActionTable, ActionID, ActionType, ActionName, GetWallet) {
				if (uni.getStorageSync("isLogin")) {
					this.$httpost('/UserAction/UserAction', {
						ArtisterID: ArtisterID,
						ActionType: ActionType,
						ActionName: ActionName,
						ActionTable: ActionTable,
						ActionID: ActionID,
						GetWallet: GetWallet,
						AddValue: ''
					}).then(res => {
						// console.log('favNotice', res);
						if (res.code == 200) {
							if (res.data !== 0) {
								this.getNotice()
							}
						}
					});
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}

			},
			baomingBtn() {
				if (uni.getStorageSync("isLogin")) {

					let user = uni.getStorageSync("isLogin");
					if (user.UserID == this.NoticeUser.UserID) {
						uni.showToast({
							title: '自己不能报名自己的通告',
							icon: 'none'
						});
						return false;
					}

					this.$common.goNavPage('/pages/index/notice/baoming?NoticeID=' + this.NoticeID);
				} else {
					this.$common.goNavPage('/pages/login/weixinlogin');
				}

			}
		}
	}
</script>

<style lang="scss">
	.NoticeUserHeadPic {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background-color: #CCC;
		float: left;
	}

	.NoticeUserHeadPic image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
	}

	.actionBar {
		position: fixed;
		z-index: 100;
		bottom: 0;
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
	}

	.baomingBtn {
		background-color: $globalColor;
		color: #333;
		text-align: center;
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		margin: 10rpx;
	}

	.baominger {
		width: 70rpx;
		height: 70rpx;
		border-radius: 70rpx;
		background-color: #CCC;
		background-size: cover;
		float: left;
		margin-left: -10rpx;
	}

	.shareBtn {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
		margin-top: 10rpx;
		background-image: url('../../static/icon/share.png');
		background-size: cover;

		&::after {
			border: none;
		}
	}

	.favBtn {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
		margin-top: 15rpx;
		background-image: url('../../static/icon/fav.png');
		background-size: cover;
	}

	.favokBtn {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
		margin-top: 15rpx;
		background-image: url('../../static/icon/favok.png');
		background-size: cover;
	}
</style>